<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI应用生成 - 租户工作台</title>
    <link href="https://demo.axureux.com/fontawesome/5.7.2/pro/css/all.min.css" rel="stylesheet"/>
    <link href="resources/css/ai-generator.css" rel="stylesheet"/>
</head>
<body>
    <div id="app-container">
        <!-- 左侧导航栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo-icon">
                    <i class="fas fa-home"></i>
                </div>
                <h2 class="sidebar-title">租户工作台</h2>
            </div>
            <nav class="sidebar-nav">
                <!-- 效率工具 -->
                <div class="nav-section">
                    <div class="nav-parent">
                        <i class="fas fa-chevron-down"></i>
                        <span>效率工具</span>
                    </div>
                    <div class="nav-children">
                        <a href="智能问答.html" class="nav-item">
                            <i class="fas fa-comments"></i>
                            <span>房产领域百事通</span>
                        </a>
                        <a href="智能写作.html" class="nav-item">
                            <i class="fas fa-pen-fancy"></i>
                            <span>自媒体能力助手</span>
                        </a>
                        <a href="测算工具.html" class="nav-item">
                            <i class="fas fa-calculator"></i>
                            <span>房产领域计算器</span>
                        </a>
                        <a href="解读报告工具.html" class="nav-item">
                            <i class="fas fa-file-alt"></i>
                            <span>材料AI一键解读</span>
                        </a>
                    </div>
                </div>
                
                <!-- 知识库 -->
                <div class="nav-section">
                    <div class="nav-parent">
                        <i class="fas fa-chevron-down"></i>
                        <span>知识库</span>
                    </div>
                    <div class="nav-children">
                        <a href="知识库-本地知识库.html" class="nav-item">
                            <i class="fas fa-database"></i>
                            <span>本地知识库</span>
                        </a>
                        <a href="知识库-业务场景知识库.html" class="nav-item">
                            <i class="fas fa-book"></i>
                            <span>业务场景知识库</span>
                        </a>
                    </div>
                </div>
                
                <!-- 用户管理 -->
                <div class="nav-section">
                    <div class="nav-parent">
                        <i class="fas fa-chevron-down"></i>
                        <span>用户管理</span>
                    </div>
                    <div class="nav-children">
                        <a href="用户管理-用户画像.html" class="nav-item">
                            <i class="fas fa-user"></i>
                            <span>用户画像</span>
                        </a>
                    </div>
                </div>
                
                <!-- 解决方案管理 -->
                <div class="nav-section">
                    <div class="nav-parent">
                        <i class="fas fa-chevron-down"></i>
                        <span>解决方案管理</span>
                    </div>
                    <div class="nav-children">
                        <a href="解决方案管理-房源报告.html" class="nav-item">
                            <i class="fas fa-file-invoice"></i>
                            <span>房产配置个性化方案</span>
                        </a>
                        <a href="解决方案管理-homeai预算助手.html" class="nav-item">
                            <i class="fas fa-wallet"></i>
                            <span>资产配置个性化方案</span>
                        </a>
                    </div>
                </div>
                
                <!-- 更多想象 -->
                <div class="nav-section">
                    <div class="nav-parent">
                        <i class="fas fa-chevron-down"></i>
                        <span>更多想象</span>
                    </div>
                    <div class="nav-children">
                        <a href="个人ip应用生成.html" class="nav-item">
                            <i class="fas fa-user-circle"></i>
                            <span>经纪人AI数字分身</span>
                        </a>
                        <a href="AI应用生成.html" class="nav-item active">
                            <i class="fas fa-magic"></i>
                            <span>AI应用生成</span>
                        </a>
                    </div>
                </div>
            </nav>
        </aside>
        
        <!-- 主内容区域包装器 -->
        <div class="main-wrapper">
        <!-- 顶部导航栏 -->
        <header class="app-header">
            <div class="header-left">
                <h1 class="page-title">
                    <i class="fas fa-magic"></i>
                    AI应用生成器
                </h1>
            </div>
            <div class="header-right">
                <button class="btn-icon" id="clearBtn" title="清空对话">
                    <i class="fas fa-trash-alt"></i>
                </button>
                <button class="btn-icon" id="settingsBtn" title="设置">
                    <i class="fas fa-cog"></i>
                </button>
                <div class="connection-status" id="wsStatus">
                    <span class="status-dot status-disconnected"></span>
                    <span class="status-text">未连接</span>
                </div>
            </div>
        </header>

        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 左侧对话面板 -->
            <section class="chat-panel">
                <div class="panel-header">
                    <h2>
                        <i class="fas fa-comments"></i>
                        智能对话
                    </h2>
                    <div class="panel-actions">
                        <button class="btn-sm" id="exportChatBtn">
                            <i class="fas fa-download"></i>
                            导出对话
                        </button>
                    </div>
                </div>
                
                <div class="chat-messages" id="chatMessages">
                    <div class="welcome-message">
                        <div class="welcome-icon">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h3>欢迎使用AI应用生成器</h3>
                        <p>描述您想要创建的应用，我将帮您实时生成代码和预览效果</p>
                        <div class="example-prompts">
                            <p class="example-title">试试这些示例：</p>
                            <button class="example-btn" data-prompt="创建一个北京学区房分析应用，展示学区房价格、面积、户型等信息，支持收藏功能。这是一个uniapp单页应用，生成后需要在uniapp项目首页自动添加这个应用的入口。">
                                🏠 北京二手房市场分析报告
                            </button>
                            <button class="example-btn" data-prompt="生成一个房贷计算器应用，支持商业贷款、公积金贷款和组合贷款计算，显示月供、总利息等信息。这是一个uniapp单页应用，生成后需要在uniapp项目首页自动添加这个应用的入口。">
                                💰 房贷计算器
                            </button>
                            <button class="example-btn" data-prompt="创建一个房源分析报告，输入房子小区名，自动调取网络数据。分析房源优势劣势 并给出建议，这是一个uniapp单页应用，生成后需要在uniapp项目首页自动添加这个应用的入口。">
                                📋 房源分析报告
                            </button>
                        </div>
                    </div>
                </div>

                <div class="chat-input-container">
                    <div class="input-wrapper">
                        <textarea 
                            id="messageInput" 
                            placeholder="描述您想要生成相关应用..."
                            rows="1"
                        ></textarea>
                        <div class="input-actions">
                            <button class="btn-icon btn-attach" title="附件">
                                <i class="fas fa-paperclip"></i>
                            </button>
                            <button class="btn-send" id="sendBtn" disabled>
                                <i class="fas fa-paper-plane"></i>
                                <span>发送</span>
                            </button>
                        </div>
                    </div>
                    <div class="input-hint">
                        <i class="fas fa-lightbulb"></i>
                        <span>按 Shift+Enter 换行，Enter 发送</span>
                    </div>
                </div>
            </section>

            <!-- 分隔条 -->
            <div class="resizer" id="resizer"></div>

            <!-- 右侧预览面板 -->
            <section class="preview-panel">
                <div class="panel-header">
                    <h2>
                        <i class="fas fa-eye"></i>
                        实时预览
                    </h2>
                    <div class="panel-actions">
                        <div class="view-mode-switcher">
                            <button class="view-btn active" data-mode="preview" title="预览模式">
                                <i class="fas fa-desktop"></i>
                            </button>
                            <button class="view-btn" data-mode="code" title="代码模式">
                                <i class="fas fa-code"></i>
                            </button>
                            <button class="view-btn" data-mode="split" title="分屏模式">
                                <i class="fas fa-columns"></i>
                            </button>
                        </div>
                        <div class="device-switcher">
                            <button class="device-btn active" data-device="desktop" title="桌面">
                                <i class="fas fa-desktop"></i>
                            </button>
                            <button class="device-btn" data-device="tablet" title="平板">
                                <i class="fas fa-tablet-alt"></i>
                            </button>
                            <button class="device-btn" data-device="mobile" title="手机">
                                <i class="fas fa-mobile-alt"></i>
                            </button>
                        </div>
                        <button class="btn-sm btn-primary" id="exportCodeBtn">
                            <i class="fas fa-file-export"></i>
                            导出代码
                        </button>
                    </div>
                </div>

                <div class="preview-content" id="previewContent">
                    <div class="preview-container" id="previewContainer">
                        <div class="empty-preview">
                            <div class="empty-content">
                                <div class="empty-icon">
                                    <i class="fas fa-magic"></i>
                                </div>
                                <h3>等待生成内容</h3>
                                <p>在左侧对话框中描述您的需求，AI将为您生成应用</p>
                            </div>
                        </div>
                    </div>

                    <div class="code-container" id="codeContainer" style="display: none;">
                        <div class="code-tabs">
                            <button class="code-tab active" data-lang="html">
                                <i class="fab fa-html5"></i>
                                HTML
                            </button>
                            <button class="code-tab" data-lang="css">
                                <i class="fab fa-css3-alt"></i>
                                CSS
                            </button>
                            <button class="code-tab" data-lang="js">
                                <i class="fab fa-js"></i>
                                JavaScript
                            </button>
                        </div>
                        <div class="code-editor">
                            <pre id="codeDisplay"><code id="codeContent"></code></pre>
                            <button class="btn-copy" id="copyCodeBtn" title="复制代码">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="preview-footer">
                    <div class="generation-info" id="generationInfo">
                        <span class="info-item">
                            <i class="fas fa-clock"></i>
                            <span id="generationTime">-</span>
                        </span>
                        <span class="info-item">
                            <i class="fas fa-file-code"></i>
                            <span id="codeSize">0 行</span>
                        </span>
                    </div>
                </div>
            </section>
        </main>
        </div><!-- /.main-wrapper -->

        <!-- 设置面板 -->
        <div class="settings-modal" id="settingsModal" style="display: none;">
            <div class="modal-overlay" id="settingsOverlay"></div>
            <div class="modal-content">
                <div class="modal-header">
                    <h3>
                        <i class="fas fa-cog"></i>
                        连接设置
                    </h3>
                    <button class="btn-close" id="closeSettingsBtn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="wsUrl">WebSocket 服务地址</label>
                        <input 
                            type="text" 
                            id="wsUrl" 
                            placeholder="ws://106.55.60.21:8000/ws"
                            value="ws://106.55.60.21:8000/ws"
                        />
                        <small>示例: ws://localhost:8000/ws</small>
                    </div>
                    <div class="form-group">
                        <label for="reconnectInterval">重连间隔 (毫秒)</label>
                        <input 
                            type="number" 
                            id="reconnectInterval" 
                            value="5000"
                            min="1000"
                            max="30000"
                        />
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="autoReconnect" checked/>
                            自动重连
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn-secondary" id="cancelSettingsBtn">取消</button>
                    <button class="btn-primary" id="saveSettingsBtn">保存并连接</button>
                </div>
            </div>
        </div>
    </div>

    <script src="resources/scripts/jquery-3.7.1.min.js"></script>
    <script src="resources/scripts/ai-generator.js"></script>
</body>
</html>
